<template>
	<view class="container">
		<view class="top-bg">
			<view class="nav-bar flex-y-center"
				:style="{paddingTop: getMenuButton().top + 'px', height: getMenuButton().height + 'px'}">
				<u-icon name="arrow-left" size="35" color="#ffffff" @tap="goBack"></u-icon>
				<view class="page-title">登录</view>
			</view>

			<view class="logo">
				<image src="/static/images/logo.png" mode=""></image>
			</view>
		</view>

		<view class="login-box">
			<view class="form-item flex-y-center">
				<image src="/static/images/icon-account.png" mode="" class="icon"></image>
				<input type="tel" maxlength="11" v-model="form.phone" placeholder="请输入手机号" />
			</view>
			<view class="form-item flex-y-center" v-if="loginType == 1">
				<image src="/static/images/icon-password.png" mode="" class="icon"></image>
				<input v-model="form.password" type="password" placeholder="请输入密码" />
			</view>
			<view class="form-item flex-y-center" v-if="loginType == 2">
				<image src="/static/images/icon-code.png" mode="" class="icon"></image>
				<input v-model="form.code" type="number" maxlength="6" placeholder="请输入验证码" />
				<view class="sms-code flex-xy-center" @tap="sendSms" :class="{disabled: timer}">
					{{timer ? countdown + 's后重发' : '获取验证码'}}
				</view>
			</view>
			<view class="flex-x-bet-y-center handle-text">
				<view class="flex-y-center" @tap="$myUni.navTo('/pages/user/register-role')">
					<text>没有账号？</text>
					<text class="register">注册</text>
				</view>
				<view class="forget-pwd" @tap="$myUni.navTo('/pages/user/forget-password')">
					忘记密码
				</view>
			</view>
			<SubmitBtn text="登录" :customStyle="{marginTop: '75rpx', width: '100%'}" @click="login"></SubmitBtn>
			<view class="code-login" @tap="loginType = loginType == 1 ? 2 : 1">{{loginType == 1 ?'验证码' : '密码'}}登录</view>
		</view>

		<view class="wechat-wrapper">
			<view class="line flex-xy-center">
				<view class="line-text">其他登录方式</view>
			</view>
			<button open-type="getPhoneNumber" class="wechat-btn flex-column-xy-center" @getphonenumber="wechatAuth">
				<image src="/static/images/icon-wechat.png" mode=""></image>
				<text>微信登录</text>
			</button>
		</view>
	</view>
</template>

<script>
	import validate from '../../utils/validate';
	import {
		toast,
		navTo
	} from '@/utils/uni-api.js'
	import {
		passwordLogin,
		codeLogin,
		wxLogin,
		getWxInfo
	} from '@/api/user.js'
	import {
		sendSmsCode
	} from '@/api/common.js'
	import SubmitBtn from '@/components/SubmitBtn/SubmitBtn.vue'
	export default {
		components: {
			SubmitBtn
		},
		data() {
			return {
				form: {
					phone: '',
					password: '',
					code: '',
				},
				loginType: 1, // 1账号密码  2验证码
				countdown: 59,
				timer: '',
			}
		},
		onLoad() {


		},
		methods: {
			sendSms() {
				if (!validate.isNotEmpty(this.form.phone, '手机号')) return
				if (!validate.isPhone(this.form.phone, '手机号')) return
				if (this.timer) return
				sendSmsCode({
					phone: this.form.phone,
					use: 2
				}).then(res => {
					toast('验证码发送成功')
					this.timer = setInterval(() => {
						this.countdown--;
						if (this.countdown < 1) {
							clearInterval(this.timer)
							this.timer = ''
							this.countdown = 59
						}
					}, 1000)
				})
			},
			goBack() {
				uni.navigateBack()
			},
			login() {
				if (!validate.isNotEmpty(this.form.phone, '手机号')) return
				if (!validate.isPhone(this.form.phone, '手机号')) return
				// 账号密码登录
				let promise = null;
				if (this.loginType == 1) {
					if (!validate.isNotEmpty(this.form.password, '密码')) return
					promise = passwordLogin(this.form)
				} else {
					if (!validate.isNotEmpty(this.form.code, '验证码')) return
					promise = codeLogin(this.form)
				}
				if (promise) {
					promise.then(res => {
						toast('登录成功', true)
						this.$store.commit('user/SET_TOKEN', res.result.token)
						this.$store.commit('user/SET_USERINFO', res.result.member)
						this.$store.commit('user/SET_ISLOGIN', true);
						setTimeout(() => {
							navTo('/pages/index/index', 'switchTab')
						}, 800)
					})
				}

			},
			wechatAuth(e) {
				uni.login({
					onlyAuthorize: true,
					success: ({ code }) => {
						getWxInfo({
							code,
							encrypted: e.detail.encryptedData,
							iv: e.detail.iv
						}).then(res => {
							// 未注册过
							if (res.result.register === 2) {
								this.$store.commit('user/SET_WXREGISTERDATA', {
									openid: res.result.openid,
									phone: res.result.phone,
									unionid: res.result.unionid
								})
								this.$myUni.navTo('/pages/user/register-role?isWxReg=true')
							} 
							// 已注册过
							else {
								wxLogin({
									openid: res.result.openid,
									phone: res.result.phone,
									unionid: res.result.unionid
								}).then(userInfo => {
									toast('登录成功', true)
									this.$store.commit('user/SET_TOKEN', userInfo.result.token)
									this.$store.commit('user/SET_USERINFO', userInfo.result.member)
									this.$store.commit('user/SET_ISLOGIN', true);
									setTimeout(() => {
										navTo('/pages/index/index', 'switchTab')
									}, 800)
								})
							}
						})
						
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		width: 750rpx;
		height: 577rpx;
		background: linear-gradient(180deg, #FE5A13 0%, #FE5A13 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.nav-bar {
			position: relative;
			padding: 20rpx 30rpx;


			.page-title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 35rpx;
				text-align: center;
				color: #fff;
			}
		}

		.logo {
			width: 192rpx;
			height: 192rpx;
			background: #FFFFFF;
			border-radius: 50%;
			margin: 60rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.login-box {
		height: 673rpx;
		margin: -70rpx 30rpx;
		padding: 20rpx 50rpx 0;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;

		.form-item {
			display: flex;
			align-items: center;
			padding-top: 60rpx;
			padding-bottom: 25rpx;
			border-bottom: 1rpx solid #EEEEEE;


			.icon {
				width: 44rpx;
				height: 44rpx;
				margin-left: 15rpx;
				margin-right: 30rpx;
			}

			input {
				flex: 1;
				font-size: 29rpx;
			}

			.sms-code {
				width: 163rpx;
				height: 52rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 1rpx solid $theme-color;
				font-weight: normal;
				font-size: 25rpx;
				color: $theme-color;
			}

			.disabled {
				border: 1rpx solid #d1d1d1;
				color: #d1d1d1;
			}


		}

		.handle-text {
			font-weight: normal;
			font-size: 27rpx;
			padding-top: 25rpx;
			color: #808080;

			.register {
				color: $theme-color;
			}

			.forget-pwd {
				text-decoration: underline;
			}
		}

		.code-login {
			padding-top: 50rpx;
			font-size: 27rpx;
			color: $theme-color;
			text-align: right;
		}
	}

	.wechat-wrapper {
		margin-top: 200rpx;

		.line {
			width: 500rpx;
			margin: auto;
			height: 1rpx;
			background: #808080;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.line-text {
				font-size: 27rpx;
				color: #808080;
				background-color: #F7F7F7;
				padding: 0 20rpx;
			}
		}

		.wechat-btn {
			margin-top: 60rpx;
			font-size: 27rpx;
			color: #19AB37;
			border: 0;

			image {
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 20rpx;
			}
		}

		.wechat-btn::after {
			border: 0;
			height: auto;
		}

		.wechat-btn:active {
			background-color: transparent;
		}
	}
</style>